<template>
  <div>
    <header ref="header">
      <!-- 日历 -->
      <div class="hd-calendar">
        <i class="iconfont icon-rili"></i>
      </div>
      <!-- 导航 -->
      <div class="hd-content">
        <a
          @click="myClick(0, 'homePage01')"
          :class="index == 0 ? 'active' : ''"
          href="javascript:;"
          >每日十句</a
        >
        <a
          @click="myClick(1, 'homePage02')"
          :class="index == 1 ? 'active' : ''"
          href="javascript:;"
          >发现</a
        >
      </div>
      <!-- 搜索 -->
      <router-link to="/search">
        <div class="hd-search">
          <i class="iconfont icon-sousuo"></i>
        </div>
      </router-link>
    </header>
    <div class="bd-container">
      <!-- 这个是路由 -->
      <!-- <router-view></router-view> -->

      <transition
        :duration="{ enter: 800, leave: 150 }"
        enter-active-class="animate__animated animate__fadeInLeft"
        enter-to-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeOutLeft"
        leave-to-class="animate__animated animate__fadeOutLeft"
      >
        <!-- 动态组件 -->
        <component :is="homeName"></component>
      </transition>
    </div>
    <!-- 底部导航 -->
    <comp-footer></comp-footer>
  </div>
</template>

<script>
// 引入组件，并且注册
import homePage01 from "../pages/home-page01.vue";
import homePage02 from "../pages/home-page02.vue";
// 引入底部导航组件
import compFooter from "../components/comp-footer.vue";
export default {
  name: "Home",
  data() {
    return {
      homeName: "homePage01", //设置默认值
      index: 0,
    };
  },
  // 注册组件
  components: {
    homePage01,
    homePage02,
    compFooter,
  },
  methods: {
    myClick(k, cName) {
      this.homeName = cName;
      this.index = k;
    },
  },
  mounted() {
    // 初始化
    this.index = 0;
    console.log("头部高度---->", this.$refs.header.offsetHeight);
  },
};
</script>

<style lang="scss" scoped>
header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 46px;
  background: #7ab4ff;
  display: flex;
  .hd-calendar,
  .hd-search {
    width: 56px;
    height: 100%;
    text-align: center;
    line-height: 46px;
    i {
      width: 26px;
      height: 26px;
      font-size: 28px;
      color: #fff;
    }
  }
  .hd-content {
    width: 262px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    a {
      display: inline-block;
      width: 130px;
      height: 46px;
      line-height: 46px;
      box-sizing: border-box;
      text-align: center;
      font-size: 18px;
      color: #c2ddff;
      // color: #ffffff;
    }
    &:hover {
      //   针对a标签移动端高亮
      -webkit-tap-highlight-color: transparent;
    }
    .active {
      color: #ffffff;
      border-bottom: 2px solid #ffffff;
    }
  }
}
</style>